<template>
  <Drawer
    :maskClosable="true"
    :closable="true"
    width="100%"
    v-model:visible="visible"
    title="组件关系管理"
    :destroyOnClose="true"
  >
    <Button class="float-right md:mx-5 md:my-5" @click="handlerCreate" type="primary"> 新增组件关系</Button>
    <Button class="float-right md:mx-5 md:my-5" @click="handlerMap" type="primary" danger :disabled="hasNullPoint">
      组件关系图
    </Button>
    <BasicTable @register="registerTable"></BasicTable>
    <ComponentRelationShipModal
      ref="componentRelationshipMgmtRef"
      @success="successHandler"
    ></ComponentRelationShipModal>
    <ComponentRelationshipDrawer ref="drawerRef"></ComponentRelationshipDrawer>
  </Drawer>
</template>

<script lang="ts" setup>
/* eslint-disable */
import { ref } from 'vue';
import { Button, Drawer } from 'ant-design-vue';
import { useBasicTable } from '/@/components/BasicTable/hooks/useBasicTable';
import BasicTable from '../../../../components/BasicTable/BasicTable.vue';
import {
  deleteComponentRelationship,
  getComponentRelationshipForMap,
  getComponentRelationshipList,
} from '/@/api/system-mgmt/app-mgmt/component';
import ComponentRelationShipModal from '/@/views/system-mgmt/app-mgmt/modal/componentRelationShipModal.vue';
import { useMessage } from '/@/hooks/web/useMessage';
import ComponentRelationshipDrawer from '/@/views/system-mgmt/app-mgmt/echartsDrawer/componentRelationshipDrawer.vue';
import { checkPowerByName } from '/@/utils/permission';

const drawerRef = ref();
const visible = ref(false);
const componentRelationshipMgmtRef = ref('componentRelationshipMgmtRef');
const appId = ref();
const { createMessage } = useMessage();

const mapPoint = ref();
const mapRelations = ref();
const hasNullPoint = ref(false);
const openDrawer = async (id: string) => {
  visible.value = true;
  appId.value = id;
  await successHandler();
};

const handlerCreate = async () => {
  componentRelationshipMgmtRef.value.openModal(appId.value, undefined, getDataSource());
};

const handlerEdit = async (record: Recordable) => {
  componentRelationshipMgmtRef.value.openModal(appId.value, record);
};

const handlerMap = async () => {
  drawerRef.value.openDrawer(mapPoint, mapRelations);
};

const successHandler = async () => {
  const result = await getComponentRelationshipList({ appId: appId.value });
  mapPoint.value = result;
  mapRelations.value = await getComponentRelationshipForMap({ appId: appId.value });
  if (mapRelations.value.length === 0) {
    hasNullPoint.value = true;
  } else {
    hasNullPoint.value = false;
  }
  setTableData(result);
};

const handlerDelete = async (record: Recordable) => {
  const result = await deleteComponentRelationship({ appId: appId.value, componentId: record.componentId });
  createMessage.success(result);
  await successHandler();
};

const [registerTable, { setTableData, getDataSource }] = useBasicTable({
  columns: [
    {
      title: '组件名称',
      dataIndex: 'componentName',
    },
    {
      title: '上游组件',
      dataIndex: 'upstreamComponentName',
      customRender: (record) => {
        let renderData = '';
        if (record.record.upstreamComponentName !== undefined) {
          record.record.upstreamComponentName.forEach((item) => {
            renderData = renderData + item + ';';
          });
        }
        return renderData;
      },
    },
    {
      title: '下游组件',
      dataIndex: 'downstreamComponentName',
      customRender: (record) => {
        let renderData = '';
        if (record.record.downstreamComponentName !== undefined) {
          record.record.downstreamComponentName.forEach((item) => {
            renderData = renderData + item + ';';
          });
        }
        return renderData;
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '180px',
    },
  ],

  usePagination: false,
  useSearchForm: false,
  immediate: true,

  actionColumns: [
    {
      name: '编辑',
      ifShow: true,
      // eslint-disable-next-line no-use-before-define
      click: handlerEdit,
      props: {
        style: { color: '#6285a3', fontWeight: 'bolder' },
      },
    },
    {
      name: '删除',
      ifShow: checkPowerByName('delete'),
      // eslint-disable-next-line no-use-before-define
      click: handlerDelete,
      props: {
        style: { color: '#6285a3', fontWeight: 'bolder' },
      },
    },
  ],
});

defineExpose({ openDrawer });
</script>
